window.addEventListener("load", function () {
    // 轮播图
    let mySwiper = new Swiper(".swiper", {
        // 自动切换
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        // 左右点击按钮
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        // 无限循环
        loop: true,
        // 分页器
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });

    // 云服务区
    const cloudServiceDate = {
        title: "为开发者提供云服务",
        text: "基于API技术向客户提供多领域、多场景的Sass服务；助力开发者提高生产效率，加快工作进程",
        more: "探索云服务",
        list: [
            {
                imgUrl: "../imgs/service01.svg",
                title: " API私有化服务",
                text: "可部署本地&专有云的Web API",
                more: "去搜索"
            },
            {
                imgUrl: "../imgs/service02.svg",
                title: " 源码云监测",
                text: "实时代码托管、威胁情报监控",
                more: "去搜索"
            },
            {
                imgUrl: "../imgs/service03.svg",
                title: " 源码有赢",
                text: "一站式营销活动服务平台",
                more: "去搜索"
            },
            {
                imgUrl: "../imgs/service04.svg",
                title: " YuanMa API",
                text: "API开发者协作平台",
                more: "去搜索"
            }
        ]
    }

    // 云服务部分
    // 标题获取节点
    let clouServiceNode = $("#clouService .public-title")
    // 拼接字符
    let titleHTML = `
            <h2>
                ${cloudServiceDate.title
        }
            </h2>
                <p>
                ${cloudServiceDate.text
        }
                </p>
                <a href="#">
                ${cloudServiceDate.more
        }
                </a>
`
    // 标题渲染到页面
    clouServiceNode.innerHTML = titleHTML;

    // 用一个新的变量去接
    let cardHtml = "";
    cloudServiceDate.list.forEach(function (v) {
        // console.log(v);
        cardHtml += `
                <li>
                <div>
                <img src=${v.imgUrl
            } alt="" width="240px" height="170px">
                </div>
                <div>
              <h4>
              ${v.title
            }
            </h4>
            <p>
           ${v.text
            }
          </p>
           <a href="#">${v.more
            }</a>
    </div>
</li>
    `
    });
    $("#clouService #service").innerHTML = cardHtml

    // -- API分类 --
    let APIcateDate = {
        title: "海量的API服务，丰富的API分类",
        text: "提供400多种API和数据块，快捷、易用、稳定，极大的满足了用户数据需求；节省了寻找时间，节约了数据维护的服务器和人力成本。",
        more: "探索API",
        list: [
            {
                imgUrl: "../imgs/api01.svg",
                text: "生活服务",
            },
            {
                imgUrl: "../imgs/api02.svg",
                text: "金融科技",
            },
            {
                imgUrl: "../imgs/api03.svg",
                text: "交通地理",
            },
            {
                imgUrl: "../imgs/api04.svg",
                text: "充值缴费",
            },
            {
                imgUrl: "../imgs/api05.svg",
                text: "数据智能",
            },
            {
                imgUrl: "../imgs/api06.svg",
                text: "企业工商",
            },
            {
                imgUrl: "../imgs/api07.svg",
                text: "应用开发",
            },
            {
                imgUrl: "../imgs/api08.svg",
                text: "应用开发",
            },
            {
                imgUrl: "../imgs/api09.svg",
                text: "吃喝玩乐",
            },
            {
                imgUrl: "../imgs/api010.svg",
                text: "文娱视频",
            }
        ]
    }

    // 标题获取节点
    let APIcateNode = $("#APIcate .container .public-title")
    // 拼接字符
    let apititleHTML = `
        <h2>
            ${APIcateDate.title
        }
        </h2>
            <p>
            ${APIcateDate.text
        }
            </p>
            <a href="#">
            ${APIcateDate.more
        }
            </a>
`
    // 标题渲染到页面
    APIcateNode.innerHTML = apititleHTML;


    // 用一个新的变量去接
    let apiListHtml = "";
    APIcateDate.list.forEach(function (v) {
        // console.log(v);
        apiListHtml += `
    <li>
    <img src=${v.imgUrl} alt="">
    <p>
        ${v.text}
    </p>
</li>
`
    });
    $("#APIcate ul").innerHTML = apiListHtml

    // 移入移出
    // 1.先获取节点
    // 2. 绑定移入移出的事件
    // 第三步 改变样式
    let oldImgUrl = null;
    $("#APIcate ul li").forEach(function (v) {
        // console.log(v);
        v.addEventListener("mouseover", function () {
            this.style.background = "#1271ef",
                this.style.color = "#f8f9fb",
                oldImgUrl = this.children[0].src,
                this.children[0].src = this.children[0].src.replace(".svg", "-c.svg")
        });
        v.addEventListener("mouseout", function () {
            this.style.background = "#fff",
                this.style.color = "#181818",
                this.children[0].src = oldImgUrl;
            oldImgUrl = null;
        })
    })

    // 独角兽部分
    let index = -1;
    this.window.setInterval(function () {
        index++
        $("#uniorn .uniorn-bg .carousel").forEach(function (v) {
            // console.log(v);
            v.style.display = "none";
        })
        $("#uniorn .uniorn-bg").children[index].style.display = "block"
        if (index>=$("#uniorn .uniorn-bg").children.length-1) {
            index = -1;
        }
    }, 2000);






    // 回到顶部
    // 获取节点
    let btn = document.querySelector("#btn")
    window.onscroll = function () {
        let y = scrollY
        if (y <= 400) {
            btn.style.display = "none"
        } else {
            btn.style.display = "block"
        }
    }
    btn.addEventListener("click", function () {
        scrollTo({
            top: 0,
            behavior: "smooth"
        })
    });
})